<template>
  <div class="content">
    <heading grade='1'>学员详情</heading>
    <div class="detail-top">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <p>姓名：{{train_student_detail.name}}</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple wrap">
            <p>地址：{{train_student_detail.address ? train_student_detail.address : '待完善'}}</p>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <p>性别：{{train_student_detail.sex === 1 ? '男' : '女'}}</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <p>家长姓名：{{train_student_detail.parentName ? train_student_detail.parentName : '待完善'}}</p>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <p>国籍：{{train_student_detail.nationalityName}}</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <p>家长手机：{{train_student_detail.parentMobile}}</p>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <p>证件号码：{{train_student_detail.idNo}}</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <p>首次报名：{{train_student_detail.sources === 0 ? '平台报名' : '后台录入'}} {{train_student_detail.createTime ? new Date(train_student_detail.createTime).format('yyyy.MM.dd') : ''}}</p>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <p>出生日期：{{train_student_detail.birthday ? new Date(train_student_detail.birthday).format('yyyy.MM.dd') : '待完善'}}</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <p>备注：{{train_student_detail.remark ? train_student_detail.remark : '无'}}</p>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <p>年龄：{{train_student_detail.age ? train_student_detail.age : '待完善'}}</p>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="main">
      <div class="divide"></div>
      <h1>在上课程</h1>
      <div class="student-detail">
        <el-table
          :data="train_student_course_list.list"
          style="width: 100%"
          stripe>
          <el-table-column
            label="序号" 
            align="center">
            <template scope="scope">
              {{scope.$index + 1}}
            </template>
          </el-table-column>
          <el-table-column
            prop="courseName"
            label="课程名称" 
            align="center"
            width="135">
          </el-table-column>
          <el-table-column
            prop="schoolName"
            label="校区" align="center" width="135">
          </el-table-column>
          <el-table-column
            prop="classesName"
            label="班别" 
            align="center"
            width="135">
          </el-table-column>
          <el-table-column
            label="上课周期" align="center" width="220">
            <template scope="scope">
              <div style="line-height: 18px;">{{new Date(scope.row.beginTime).format('yyyy.MM.dd')}}-{{new Date(scope.row.endTime).format('yyyy.MM.dd')}}</div>
              <div v-if="scope.row.weekCodes">{{scope.row.weekCodes | getWeekList}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="operate" label="操作" width="120" align="center">
            <template scope="scope">
              <el-button
                size="small"
                @click="handleCourseDetail(scope.$index, scope.row)"  type="link">查看上课情况</el-button>
            </template>
          </el-table-column>
        </el-table>
         <el-pagination
          v-bind="getPaginationProps(train_student_course_list)"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          >
        </el-pagination> 
      </div>
    </div>
  </div>
</template>

<script>
import {pagingList} from 'utils/mixins'
import { mapGetters } from 'vuex'
export default {
  mixins: [pagingList],
  computed: {
    ...mapGetters({
      train_student_detail: 'train_student_detail', // 学员详情
      train_student_course_list: 'train_student_course_list' // 学员在上课程列表
    })
  },
  data () {
    return {
      query: this.getQuery()
    }
  },
  created () {
    this.$store.dispatch('train_student_detail', {studentId: this.$route.params.id})
  },
  methods: {
    handleCourseDetail (index, row) {
      this.$router.push({path: '/training/student/situation', query: {classId: row.classId, studentId: row.studentId}})
    },
    fetch (query) {
      let queryInit = Object.assign({studentId: this.$route.params.id}, query)
      this.$store.dispatch('train_student_course_list', queryInit)
    }
  }
}
</script>

<style lang="scss">
@import '~styles/var';
.content {
  .detail-top {
    .el-row {
      margin-top: 25px;
    }
    .wrap {
      width: 330px;
      word-wrap:break-word;
      line-height: 20px;
    }
  }
  .main {
    min-height: 100%;
    background: #fff;
    .divide {
      margin: 30px -60px 0;
      border-top: 20px solid $background-color;
    }
    h1 {
      margin: 30px 0 40px;
      font-size: 18px;
    }
    .student-detail {
      margin-top: 20px;
      tbody {
        tr {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
